<template>
    <div>
        <el-dialog title="添加规格" :visible.sync="dialogTableVisible" :close-on-click-modal="false" @close="close">
            <el-form ref="specs" :model="specs" label-width="80px" :rules="rules">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="specs.name" autocomplete="off" placeholder="请填写规格名称"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="specs.description" autocomplete="off" placeholder="请填写规格描述"></el-input>
                </el-form-item>
                <el-form-item label="单位" prop="unit">
                    <el-input v-model="specs.unit" autocomplete="off" placeholder="规格单位,例如:G,英寸,M"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSpec">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import http from '@/utils/request';
export default {
    name: 'ThreeInsertSpec',
    data() {
        return {
            dialogTableVisible:false,
            specs: {},
            rules: {
                name: [
                { required: true, message: '请输入规格名称', trigger: 'blur' },
                ],
            },
            current: ''
        };
    },

    mounted() {
        
    },

    methods: {
        async addSpec(){
           await this.$refs.specs.validate() 
           //console.log(this.specs);
           const table = this.specs
           const s = await http.post('/spec/insert',table)
           if(s.data.code>0){
              this.$message({
                            message: '添加成功',
                            type: 'success'
                        })
                        // 关闭模态框
                        this.dialogTableVisible = false
                        // 数据重新加载
                        this.$emit('refresh',this.current)
           }
           this.$refs.specs.resetFields()
        },
        close(){
            this.$refs.specs.resetFields()
        } 
    },
};
</script>

<style lang="scss" scoped>

</style>